<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comic Page Navigation Demo</title>
<style type="text/css">
body {
  background-color:#E3E0D1;
  padding:30px 50px;
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  text-transform:uppercase;
}

a {
  color:black;
}

.img-show {
  width:400px;
  margin:50px auto;
  background-color:black;
  border:2px solid black;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  position:relative;
  overflow:hidden;
}

.img-show .img-holder {
  background-color:white;
}

.img-show .img-holder.loading {
  background:white url('img/loading.gif') no-repeat 50% 300px;
}

.img-show .img-holder img {
  display:block;
}

.img-show .img-nav {
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

.img-show .img-nav li {
  margin:2px 2px 0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
}

.img-nav li a {
  display:block;
  background-color:#ccc;
  color:black;
  padding:3px 7px;
  font:normal 12px Georgia,Serif;
  font-style:italic;
  text-decoration:none;
}

.img-nav li a.active {
  background-color:#900;
  color:white;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
	$('.img-gallery').each(function() {
		var w = $(this).data("width"),
			h = $(this).data("height"),
			viewport = $('html, body'),
			fadeSpeed = 400,
			resizeSpeed = 600;
		$(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
		var $firstNav = $('li:first a', this),
			current = $firstNav.attr('href'),
			$parent = $(this).parents('.img-show');
		$firstNav.addClass('active');
		$parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
		$parent.find('.img-holder').addClass('loading').html('<img class="transparent" src="' + current + '" alt="Loading..."/>');
		$parent.find('img.transparent').css('opacity', 0).load(function() {
			$parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
				$(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
			});
		});
		
		$('a', this).each(function(i) {
			i = i+1;
			$(this).attr("title", $(this).text());
			$(this).html(i);
		}).on("click", function() {
			var $activeNav = $(this).parents('.img-gallery').find('a.active'),
				$activeParent = $(this).parents('.img-show');
			$activeNav.removeClass('active');
			viewport.scrollTop($activeParent.offset().top-40);
			$(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt="Loading..."/>');
			$parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {
				$parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
					$(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
				});
			});
			return false;
		});

	});
});
//]]>
</script>

</head>
<body>

<header>
	<h1>Demo Komik dengan Navigasi Halaman</h1>
	<p>Gambar: <a href="http://komikfox.blogspot.com" rel="nofollow">Komikfox</a>, demo oleh <a href="http://hompimpaalaihumgambreng.blogspot.com/2012/06/solusi-untuk-masalah-blog-bertema-komik.html">Taufik Nurrohman</a></p>
</header>

<ul class="img-gallery" data-width="750" data-height="1088">
	<li><a href="img/01.png">Halaman 1</a></li>
	<li><a href="img/02.png">Halaman 2</a></li>
	<li><a href="img/03.png">Halaman 3</a></li>
	<li><a href="img/04.png">Halaman 4</a></li>
	<li><a href="img/05.png">Halaman 5</a></li>
	<li><a href="img/06.png">Halaman 6</a></li>
	<li><a href="img/07.png">Halaman 7</a></li>
	<li><a href="img/08.png">Halaman 8</a></li>
	<li><a href="img/09.png">Halaman 9</a></li>
	<li><a href="img/10.png">Halaman 10</a></li>
	<li><a href="img/11.png">Halaman 11</a></li>
	<li><a href="img/12.png">Halaman 12</a></li>
	<li><a href="img/13.png">Halaman 13</a></li>
	<li><a href="img/14.png">Halaman 14</a></li>
	<li><a href="img/15.png">Halaman 15</a></li>
	<li><a href="img/16.png">Halaman 16</a></li>
</ul>
<ul class="img-gallery" data-width="728" data-height="1050">
	<li><a href="img/17.jpg">Halaman 17</a></li>
	<li><a href="img/18.jpg">Halaman 18</a></li>
	<li><a href="img/19.jpg">Halaman 19</a></li>
	<li><a href="img/20.jpg">Halaman 20</a></li>
	<li><a href="img/21.jpg">Halaman 21</a></li>
	<li><a href="img/22.jpg">Halaman 22</a></li>
	<li><a href="img/23.jpg">Halaman 23</a></li>
	<li><a href="img/24.jpg">Halaman 24</a></li>
	<li><a href="img/25.jpg">Halaman 25</a></li>
	<li><a href="img/26.jpg">Halaman 26</a></li>
	<li><a href="img/27.jpg">Halaman 27</a></li>
	<li><a href="img/28.jpg">Halaman 28</a></li>
	<li><a href="img/29.jpg">Halaman 29</a></li>
	<li><a href="img/30.jpg">Halaman 30</a></li>
</ul>


</body>
</html>